import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
import { Picker } from '@react-native-picker/picker';

// 定义类型接口
interface FormData {
  country: string;
  city: string;
  gender: string;
  age: string;
}

interface OptionItem {
  label: string;
  value: string;
}

interface CitiesMap {
  [key: string]: OptionItem[];
}

const TradingScreen = () => {
  const [formData, setFormData] = useState<FormData>({
    country: 'china',
    city: 'beijing',
    gender: 'male',
    age: '25'
  });

  const countries: OptionItem[] = [
    { label: '中国', value: 'china' },
    { label: '美国', value: 'usa' },
    { label: '日本', value: 'japan' },
    { label: '韩国', value: 'korea' },
  ];

  const cities: CitiesMap = {
    china: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广州', value: 'guangzhou' },
      { label: '深圳', value: 'shenzhen' },
    ],
    usa: [
      { label: '纽约', value: 'newyork' },
      { label: '洛杉矶', value: 'losangeles' },
      { label: '芝加哥', value: 'chicago' },
    ],
    japan: [
      { label: '东京', value: 'tokyo' },
      { label: '大阪', value: 'osaka' },
    ],
    korea: [
      { label: '首尔', value: 'seoul' },
      { label: '釜山', value: 'busan' },
    ],
  };

  const genders: OptionItem[] = [
    { label: '男', value: 'male' },
    { label: '女', value: 'female' },
    { label: '其他', value: 'other' },
  ];

  const ages: OptionItem[] = Array.from({ length: 50 }, (_, i) => ({
    label: `${i + 18} 岁`,
    value: `${i + 18}`
  }));

  const handleChange = (key: keyof FormData, value: string) => {
    try {
      setFormData(prev => {
        const newData = { ...prev, [key]: value };
        // 如果改变了国家，重置城市
        if (key === 'country' && cities[value] && cities[value].length > 0) {
          newData.city = cities[value][0].value;
        }
        return newData;
      });
    } catch (error) {
      console.error('Error updating form data:', error);
    }
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.header}>用户信息1111</Text>

      {/* 国家选择 */}
      <View style={styles.inputGroup}>
        <Text style={styles.label}>国家</Text>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={formData.country}
            onValueChange={(value) => handleChange('country', value)}
            style={[styles.picker, Platform.OS === 'web' && styles.webPicker]}
          >
            {countries.map(country => (
              <Picker.Item
                key={country.value}
                label={country.label}
                value={country.value}
              />
            ))}
          </Picker>
        </View>
      </View>

      {/* 城市选择 */}
      <View style={styles.inputGroup}>
        <Text style={styles.label}>城市</Text>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={formData.city}
            onValueChange={(value: string) => handleChange('city', value)}
            style={[styles.picker, Platform.OS === 'web' && styles.webPicker]}
            enabled={!!formData.country && !!cities[formData.country]}
          >
            {cities[formData.country]?.map((city: OptionItem) => (
              <Picker.Item
                key={city.value}
                label={city.label}
                value={city.value}
              />
            ))}
          </Picker>
        </View>
      </View>

      {/* 性别选择 */}
      <View style={styles.inputGroup}>
        <Text style={styles.label}>性别</Text>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={formData.gender}
            onValueChange={(value: string) => handleChange('gender', value)}
            style={[styles.picker, Platform.OS === 'web' && styles.webPicker]}
          >
            {genders.map((gender: OptionItem) => (
              <Picker.Item
                key={gender.value}
                label={gender.label}
                value={gender.value}
              />
            ))}
          </Picker>
        </View>
      </View>

      {/* 年龄选择 */}
      <View style={styles.inputGroup}>
        <Text style={styles.label}>年龄</Text>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={formData.age}
            onValueChange={(value: string) => handleChange('age', value)}
            style={[styles.picker, Platform.OS === 'web' && styles.webPicker]}
          >
            {ages.map((age: OptionItem) => (
              <Picker.Item
                key={age.value}
                label={age.label}
                value={age.value}
              />
            ))}
          </Picker>
        </View>
      </View>

      {/* 显示结果 */}
      <View style={styles.result}>
        <Text style={styles.resultTitle}>选择结果:</Text>
        <Text>国家: {countries.find((c: OptionItem) => c.value === formData.country)?.label}</Text>
        <Text>城市: {cities[formData.country]?.find((c: OptionItem) => c.value === formData.city)?.label}</Text>
        <Text>性别: {genders.find((g: OptionItem) => g.value === formData.gender)?.label}</Text>
        <Text>年龄: {formData.age} 岁</Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
    color: '#333',
  },
  inputGroup: {
    backgroundColor: '#fff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 8,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 8,
    color: '#333',
  },
  picker: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    height: Platform.OS === 'ios' ? 150 : 50,
  },
  pickerContainer: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    overflow: 'hidden',
  },
  webPicker: {
    height: 50,
    width: '100%',
  },
  result: {
    backgroundColor: '#fff',
    margin: 16,
    padding: 16,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  resultTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#333',
  },
});

export default TradingScreen;